﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestLayer.aspx.cs" Inherits="TestLayer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <!--  Layer引入文件 -->
    <script src="Layer/jquery.js" type="text/javascript"></script>
    <script src="Layer/layer.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function fn_01() {
            //信息框一
            $.layer({
                area: ['auto', 'auto'],
                dialog: { msg: '白菜级别前端攻城师贤心', type: 8 }
            });
        }
        function fn_02() {
            //信息框二
            $.layer({
                shade: ['', false],
                area: ['auto', 'auto'],
                title: ['', false],
                dialog: { msg: '前端攻城师贤心' }
            });
         }
        function fn_03() {
            //询问框
            $.layer({
                shade: ['', false],
                area: ['auto', 'auto'],
                dialog: {
                    msg: '您是如何看待前端开发？',
                    btns: 2,
                    type: 4,
                    btn: ['重要', '奇葩'],
                    yes: function () {
                        layer.msg('您选择了重要。', 2, 1);
                    },
                    no: function () {
                        layer.msg('奇葩!!!', 2, 4);
                    }
                }
            });
         }
        function fn_04() {
            //页面层一
            $.layer({
                shade: ['', false],
                type: 1,
                area: ['315px', 'auto'],
                offset: ['300px', ''],
                border: [10, 0.5, '#628C1C', true],
                page: { dom: '.layer_notice' },
                close: function (index) {
                    LAYER.close(index);
                    $('.layer_notice').show();
                }
            });
         }
        function fn_05() {
            //页面层二
            $.layer({
                type: 1,
                title: ['', false],
                fix: false,
                offset: ['50px', ''],
                area: ['515px', '615px'],
                page: { dom: '#tong' }
            });
            $('#tong').live('click', function () {
                var index = LAYER.getIndex(this);
                LAYER.close(index);
            });
         }
        function fn_06() {
        //iframe层
        $.layer({
            type: 2,
            closeBtn: [0, false],
            time: 5,
            iframe: {
                src: 'http://player.youku.com/player.php/sid/XMjY3MzgzODg0/v.swf'
            },
            title: ['', false],
            area: ['500px', '300px'],
            success: function () { //层加载成功后进行的回调
                LAYER.shift('right-bottom', 1000); //浏览器右下角弹出
            },
            end: function () { //层彻底关闭后执行的回调
                $.layer({
                    type: 2,
                    offset: ['100px', ''],
                    iframe: {
                        src: 'http://xu.sentsin.com/about/'
                    },
                    area: ['960px', '500px']
                })
            }
        });
         }
        function fn_07() {
            //加载层
            $.layer({
                type: 3,
                time: 2
            });
         }
        function fn_08() {
            
                layer.tips('我爱你，你爱我吗？', this, 3);
            
        }
        function change() {
            $("#btnTest").attr('onclick', $("#select_01").text());
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-left:50px; padding-top:50px;">
        <select id="select_01" onchange="change()">
            <option>fn_01()</option>
            <option>fn_02()</option>
            <option>fn_03()</option>
            <option>fn_04()</option>
            <option>fn_05()</option>
            <option>fn_06()</option>
            <option>fn_07()</option>
            <option>fn_08()</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="测试" id="btnTest" onclick="fn_08()"/>
    </div>
    </form>
</body>
</html>
